<template>
  <div class="main">
    <el-container>
      <!-- menu菜单开启路由跳转 -->
      <el-aside width="140px">
        <!-- collapse 设定侧边栏收缩 -->
        <el-menu :collapse="isCollapse" unique-opened router>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-message"></i>
              <span>系统专区</span>
            </template>
            <el-menu-item-group title="专区">
              <el-menu-item index="/categories/create">测试页勿点</el-menu-item>
              <el-menu-item index="/categories/list">查看专区</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="系统">
              <el-menu-item index="/notices/list">通知</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>用户</span>
            </template>
            <el-menu-item-group title="用户">
              <el-menu-item index="/users/create">创建用户</el-menu-item>
              <el-menu-item index="/users/list">查看用户</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="评论">
              <el-menu-item index="/messages/list">消息</el-menu-item>
              <el-menu-item index="/comments/list">评论</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>视频</span>
            </template>
            <el-menu-item-group title="视频">
              <el-menu-item index="/videos/create">视频详情</el-menu-item>
              <el-menu-item index="/videos/list">视频列表</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="直播">
              <el-menu-item index="/live/create">直播详情</el-menu-item>
              <el-menu-item index="/live/list">直播列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <!-- <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown> -->
        </el-header>

        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style>
.main .el-header {
  background-color: #1e90ff;
  color: #333;
  line-height: 60px;
}

.main .el-aside {
  color: #333;
}
.main .el-submenu .el-menu-item {
  min-width: 140px !important;
}
.main .el-menu-item.is-active {
  color: #fff !important;
  background: #409eff !important;
  min-width: 140px !important;
}

/* 媒体查询 aside 侧边栏宽度与el-menu菜单一致 */
@media screen and (max-width: 1200px) {
  .main .el-aside {
    width: 65px !important;
  }
}
</style>
<script>
export default {
  data() {
    return {
      isCollapse: false,
    }
  },
  methods: {
    page_width() {
      //获取屏幕宽度
      let screenWidth = document.body.clientWidth
      //判断宽度
      if (screenWidth < 1200) {
        this.isCollapse = true
      } else {
        this.isCollapse = false
      }
    },
  },
  mounted() {
    window.onresize = () => {
      //监听屏幕变化
      this.page_width()
    }
    //进入页面第一次获取宽度
    this.page_width()
  },
}
</script>
